<template>
  <div>
    <el-table
      :data="randomsList"
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        label="编号"
        width="220px"
      >
      </el-table-column>
      <el-table-column
        label="题型"
        width="80px"
      >
        <template v-slot="{ row }">
          <span>{{ type[row.questionType] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="题目编号"
        width="220px"
        prop="number"
      >
      <template slot-scope="{ row }">
        <div v-for="(item, index) in row.questionIDs" :key="index">
          <a href="#" class="number" @click="open(item)">{{ item.number }}</a>
        </div>
      </template>
      </el-table-column>
      <el-table-column
        prop="addTime"
        label="录入时间"
        width="180px"
      >
      </el-table-column>
      <el-table-column
        prop="totalSeconds"
        label="答题时间(S)"
      >
      </el-table-column>
      <el-table-column
        prop="accuracyRate"
        label="正确率(%)"
      >
      </el-table-column>
      <el-table-column
        prop="userName"
        label="录入人"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="80px"
      >
      <template v-slot="{ row }">
        <el-button
        size="small"
        :plain="true"
        type="danger"
        icon="el-icon-delete"
        circle
        @click="deleteNum(row.id)"
        >
        </el-button>
      </template>
      </el-table-column>
    </el-table>
    <!-- 题目详情框 -->
    <previewDialog
      ref="dialog"
      :showDialog.sync="showDialog"
    >
    </previewDialog>
  </div>
</template>

<script>
import previewDialog from '../../components/common/preview-dialog.vue'
import { removeRandoms } from '@/api/hmmm/questions'
export default {
  components: {
    previewDialog
  },
  props: {
    randomsList: {
      type: Array,
      required: true
    },
    pagingQuery: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      showDialog: false, // 控制题目详情页开关
      type: {
        1: '单选',
        2: '多选',
        3: '简答'
      } // 题型
    }
  },
  methods: {
    // 预览题目
    open (row) {
      const numId = { id: row.id }
      console.log(numId)
      // 打开题目详情框
      this.showDialog = true
      // 调用dialog内的方法
      this.$refs.dialog.getDetailList(numId)
    },
    // 删除
    deleteNum (id) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms({ id })
        this.$emit('getRandomsList')
        if (this.randomsList.length === 1 && this.pagingQuery.page > 1) {
          this.$emit('update')
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>
.number {
  color: #0099ff;
}
</style>
